<template>
  <div style="height: 100%">
    <a-spin :spinning="false" wrapperClassName="spinning-container">
      <div class="header-container" ref="headerContainer">
        <page-header :title="l('CacheState')"></page-header>
      </div>
      <a-row style="margin-top: 0.5rem" :gutter="16">
        <a-col :span="8">
          <a-card :title="l('CacheList')" :bordered="false">
            <template #extra v-if="isGranted('Pages.CacheState.Query')"
              ><a @click="reload()">刷新</a></template
            >
            <!-- 缓存列表 -->
            <a-table
              size="middle"
              :scroll="{ x: tableWidthScroll, y: tableHeightScroll }"
              :rowKey="(record) => record.id"
              :columns="keyColumns"
              :data-source="nKeyData"
              :customRow="tableclick"
            >
              <!-- tbody插槽 -->
              <template #bodyCell="{ column, record }">
                <!-- 操作列 -->
                <template v-if="column.key === 'actions'">
                  <div>
                    <!-- 删除 -->
                    <a-popconfirm
                      placement="top"
                      :ok-text="l('Ok')"
                      :cancel-text="l('Cancel')"
                      @confirm="deleteNameSpace(record)"
                    >
                      <template #title>{{ l('ConfirmDeleteWarningMessage') }}</template>
                      <a>
                        <delete-outlined />
                        {{ l('Delete') }}
                      </a>
                    </a-popconfirm>
                  </div>
                </template>
              </template>
            </a-table>
          </a-card>
        </a-col>
        <a-col :span="8">
          <a-card :title="l('CacheKeyList')" :bordered="false">
            <template #extra v-if="isGranted('Pages.CacheState.Query')"
              ><a @click="reload()">刷新</a></template
            >
            <!-- 键名列表 -->
            <a-table
              size="middle"
              :scroll="{ x: tableWidthScroll, y: tableHeightScroll }"
              :rowKey="(record) => record.id"
              :columns="keyColumns"
              :data-source="cKeyData"
              :customRow="cKeyTableclick"
            >
              <!-- tbody插槽 -->
              <template #bodyCell="{ column, record }">
                <!-- 操作列 -->
                <template v-if="column.key === 'actions'">
                  <div>
                    <template v-if="isGranted('Pages.CacheState.Delete')">
                      <!-- 删除 -->
                      <a-popconfirm
                        placement="top"
                        :ok-text="l('Ok')"
                        :cancel-text="l('Cancel')"
                        @confirm="deleteKey(record)"
                      >
                        <template #title>{{ l('ConfirmDeleteWarningMessage') }}</template>
                        <a>
                          <delete-outlined />
                          {{ l('Delete') }}
                        </a>
                      </a-popconfirm>
                    </template>
                  </div>
                </template>
              </template>
            </a-table>
          </a-card>
        </a-col>
        <a-col :span="8">
          <a-card :title="l('CacheValue')" :bordered="false">
            <template #extra v-if="isGranted('Pages.CacheState.FlushDb')"
              ><a @click="flushDb()">清除所有缓存</a></template
            >
            <a-form autocomplete="off" ref="formRef">
              <a-form-item name="appRevision" :label="l('CacheName')">
                <a-input :placeholder="l('CacheName')" v-model:value="nCacheKey" />
              </a-form-item>
              <a-form-item :label="l('CacheKey')">
                <a-input id="input" :placeholder="l('CacheKey')" v-model:value="cCacheKey" />
              </a-form-item>
              <a-form-item :label="l('CacheValue')">
                <a-textarea v-model:value="cacheValue" :placeholder="l('CacheValue')" :rows="8" />
              </a-form-item>
            </a-form>
          </a-card>
        </a-col>
      </a-row>
    </a-spin>
  </div>
</template>

<script lang="ts">
  import { defineComponent } from 'vue';
  import { CacheStateServiceProxy, PagedListingComponentBase } from '/@/shared';
  export default defineComponent({
    name: 'apk-managements',
    mixins: [PagedListingComponentBase],
    data() {
      return {
        cacheStateService: new CacheStateServiceProxy(),
        keyColumns: [
          {
            title: this.l('serialNumber'),
            customRender: ({ index }) => {
              const a = (this.pageNumber - 1) * this.pageSize + (index + 1);
              return a;
            },
            width: 60,
            fixed: 'left',
          },
          {
            title: this.l('CacheName'),
            dataIndex: 'key',
            key: 'key',
            ellipsis: true,
          },
          {
            title: this.l('Actions'),
            dataIndex: 'actions',
            key: 'actions',
            ellipsis: true,
            width: 60,
            fixed: 'right',
          },
        ],
        // 全部数据 namespace
        nKeyData: [],
        // namespace 下的数据
        cKeyData: [],
        // namespace cache key
        nCacheKey: '',
        // namespace 下的cache key
        cCacheKey: '',
        // cache value
        cacheValue: '',
      };
    },
    created() {
      this.getAllCacheKey();
    },
    methods: {
      // 获取全部缓存键
      getAllCacheKey() {
        this.isTableLoading = true;
        this.cacheStateService.getAllCacheKey().then((res) => {
          this.isTableLoading = false;
          this.nKeyData = res;
        });
      },
      //   重新加载
      reload() {
        // 清空
        this.nKeyData = [];
        this.cKeyData = [];
        // 重新获取
        this.getAllCacheKey();
        this.notify.success(this.l('RefreshSuccessfully'));
      },
      // 删除缓存列表
      deleteNameSpace(record) {
        this.cacheStateService.deleteNameSpace(this.nCacheKey).then(() => {
          //   this.notify.success(this.l('DeleteSuccessfully'));
          // 刷新
          this.reload();
        });
      },
      // 删除键
      deleteKey(record) {
        this.cacheStateService.delete(this.nCacheKey + ',' + this.cCacheKey).then(() => {
          // 刷新
          this.reload();
        });
      },
      flushDb() {
        this.cacheStateService.flushDb().then(() => {
          // 刷新
          this.reload();
        });
      },
      //   缓存列表行点击
      tableclick(record: any, _index: any) {
        return {
          onClick: () => {
            this.cKeyData = [];
            this.nCacheKey = record.key;
            this.nKeyData.forEach((item) => {
              if (item.key === record.key) {
                item.cKeys.forEach((item) => {
                  this.cKeyData.push({
                    key: item,
                  });
                });
              }
            });
          },
        };
      },
      //   键名列表行点击
      cKeyTableclick(record: any, _index: any) {
        return {
          onClick: () => {
            this.cCacheKey = record.key;
            console.log(this.cCacheKey);
            this.cacheStateService.get(this.nCacheKey + ',' + this.cCacheKey).then((res) => {
              this.cacheValue = res;
            });
          },
        };
      },
    },
  });
</script>
